{% extends 'base.html' %}
{% load site_tags %}

{% block title %}Certifications — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<section class="py-5" style="background:linear-gradient(135deg,var(--brand-secondary),var(--brand-primary));color:#fff;">
  <div class="container">
    <h1 class="fw-bold mb-2">Skill Certifications</h1>
    <p class="mb-0 opacity-75">Already skilled? Pass a professional MCQ exam and earn a verifiable certificate.</p>
    <a href="{% url 'certifications:verify' %}" class="btn btn-light btn-sm mt-3">
      <i class="bi bi-shield-check me-1"></i>Verify a certificate
    </a>
  </div>
</section>

<section class="py-5">
  <div class="container">
    {% if categories %}
    <div class="d-flex flex-wrap gap-2 mb-4">
      <a href="{% url 'certifications:program_list' %}" class="btn btn-sm {% if not selected_category %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill">All</a>
      {% for cat in categories %}
      <a href="?category={{ cat.slug }}" class="btn btn-sm {% if selected_category == cat.slug %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill">{{ cat.name }}</a>
      {% endfor %}
    </div>
    {% endif %}
    <div class="row g-4">
      {% for program in programs %}
      <div class="col-md-6 col-lg-4">
        <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift">
          <div class="card-body p-4 d-flex flex-column">
            <div class="d-flex flex-wrap gap-1 mb-2">
              <span class="badge align-self-start" style="background:color-mix(in srgb,var(--brand-accent) 25%,white);color:var(--brand-secondary);">Certification</span>
              {% if program.category %}
              <span class="badge bg-primary-subtle text-primary">{{ program.category.name }}</span>
              {% endif %}
            </div>
            <h5 class="fw-bold">{{ program.title }}</h5>
            <p class="text-muted small flex-grow-1">{{ program.short_description }}</p>
            <div class="d-flex justify-content-between align-items-center small text-muted mb-3">
              <span><i class="bi bi-ui-checks me-1"></i>{{ program.questions_per_exam }} MCQs</span>
              <span><i class="bi bi-trophy me-1"></i>Pass {{ program.passing_score }}%</span>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <strong class="text-primary">{% format_price program.fee %}</strong>
              <a href="{% url 'certifications:program_detail' program.slug %}" class="btn btn-primary btn-sm">Details</a>
            </div>
          </div>
        </div>
      </div>
      {% empty %}
      <div class="col-12 text-center text-muted py-5">
        <i class="bi bi-award display-5 d-block mb-2 opacity-25"></i>
        No certification programs published yet.
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}